<template>
      <div class="icons">
          <swiper :options="swiperOption">
            <swiper-slide v-for="(page,index) in pages" :key="index">
               <div class="icon" v-for="(item,index) in page" :key="item.id">
                    <img :src="item.imgUrl" alt="">
                     <p>{{item.desc}}</p>
               </div>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
      </div>
</template>
<script>
    export default {
        name: "Icons",
        props:{
            iconsData:Array
        },
        data () {
           return {
             swiperOption:{
               pagination:".swiper-pagination"
             },
             // iconsUrl:[
             //   {id:"001",imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",desc:"景点门票"},
             //   {id:"002",imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png",desc:"一日游"},
             //   {id:"003",imgUrl:"http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",desc:"北京必游"},
             //   {id:"004",imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png",desc:"水上乐园"},
             //   {id:"005",imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/0334cf5430b9b5505fd79e2b8d7e8670.png",desc:"爬长城"},
             //   {id:"006",imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png",desc:"故宫"},
             //   {id:"007",imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png",desc:"动植物园"},
             //   {id:"008",imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png",desc:"北京动物园"},
             //   {id:"009",imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png",desc:"动物园"}
             // ]
           }
        },
        computed:{
           pages () {
                const pages=[];//定义数组
               this.iconsData.forEach((item,index) => {
                    const page= Math.floor(index / 8); //下标是8 就是第九个图标
                   if(!pages[page]){
                     pages[page]=[];
                   }
                    pages[page].push(item);
               });
               console.log(pages);
               return pages;
           }
        }
    }
</script>
<style lang="stylus" scoped>
   .icons >>> .swiper-container{
     height:0;
     padding-bottom :50%;
   }
   .icons  >>> .swiper-container-horizontal > .swiper-pagination-bullets{
       bottom:1px;
   }
   .icons >>> .swiper-pagination-bullet-active{
     background :#00bcd4;
   }
   .icons{
     //width: 100%
     //height:0;
     //padding-bottom:50%;
     //overflow :hidden;
    // background :orange;
      .icon{
        float :left;
        width: 25%;
        height:0;
        padding-bottom :25%;
        text-align:center;
      //  background :lightblue;
        img{
          width: 60%;
          margin-top :0.07rem;
        }
        p{
          color:#6f6f6f;
          margin-top :0.03rem;
          font-size :.12rem;
        }
      }
   }
</style>
